/*eslint-disable*/
import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Cascader, Modal, Input,message ,Switch} from 'antd';
import request from '../../../utils/request'
const consult = () => {
    const options1 = [
        {
            value: '开启',
            label: '开启',
        },
        {
            value: '关闭',
            label: '关闭',
        }
    ];
    function onChange(value) {
        console.log(value);
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '文章标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '创建人',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '创建日期',
            dataIndex: 'data',
            key: 'data',
        },
        {
            title: '状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            render:(o,record,index)=>{
                return(
                    <Switch defaultChecked={record.status==="1" ? true:false } checkedChildren="开启" unCheckedChildren="关闭"/>
                )
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text,record) => (
                <Space size="middle">
                    <a onClick={() => edit(record.id)}>编辑</a>
                    <a onClick={() => del(record.id)}>删除</a>
                </Space>
            ),
        },
    ];
    const [list, setlist] = useState([])
    //弹框开关
    const [isModalVisible, setIsModalVisible] = useState(false);

    //自定义开关
    const [flag, setFlag] = useState(false)
    //输入绑定的内容
    const [title, setTitle] = useState("")//标题自定义数据
    const [name, setName] = useState("")//创建人自定义数据
    // const [data, setData] = useState("")//时间自定义数据


    //搜索绑定的内容
    const [val,setval]=useState("")
    const [one,setone]=useState("")
    const [id, setid] = useState(null)


    //添加弹框
    const addModal = () => {
        setFlag(false)
        setIsModalVisible(true);
    };
    //取消键
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //编辑弹框
    const edit = (id) => {
        setFlag(true)
        setIsModalVisible(true)
        setid(id)
        //数据回显
    }

    useEffect(() => {
        tablelist()
    }, [])

    const tablelist = async () => {
        const res = await request.get('/api/list6')
        setlist([...res.data.data])
    }

    //删除
    const del =async (key) => {
      await request({
            url:"/api/list6del",
            method:"delete",
            params:{id:key}
        })
        tablelist()
        message.success("操作成功")
    }
    //添加数据或修改数据
    const handleOk = async () => {
        setIsModalVisible(false);
        if (flag) {
        const res=  await request({
                url: "/api/list6edit",
                method: "post",
                data: {
                    name,
                    title,
                    id
                }
            })
            console.log(res);
            tablelist()
            message.success("操作成功")
        } else {
            const res = await request({
                url: "/api/list6add",
                method: "post",
                data: {
                    name,
                    title,
                }
            })
            tablelist()
            message.success('操作成功');

        }
    };
    //搜索
    const onSearch = (value) => {
        console.log(value)
        request.post('/api/list6search', { value: value }).then(res => {
            console.log(res);
            tablelist()
        })
    };
    return (
        <div>
            <header>
                咨询管理
            </header>
            <div className="div-btn">
                <div className="inp">搜索<span><input placeholder="请输入经纪人姓名/手机号" onChange={(e) => onSearch(e.target.value)}/></span></div>
                <div>状态<span><Cascader options={options1} onChange={onChange} placeholder="请选择" /></span></div>
                <div><Button >查询</Button><Button type="primary" onClick={() => addModal()}>新增</Button></div>
            </div>
            <div>
                <Table columns={columns} dataSource={list} />
            </div>
            <div>
                <Modal title={flag === false ? "添加" : "编辑"} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='addBox'>
                <p><span>标题</span><Input value={title} placeholder="标题" onChange={(e) => setTitle(e.target.value)} /></p>
                    <p><span>创建人</span><Input value={name} placeholder="创建人" onChange={(e) => setName(e.target.value)} /></p> 
                </Modal>
            </div>
        </div>
    )
}
export default consult
